<template>
  <div id="chart" class="container-fluid" style="padding: 40px 10px">
    <div class="row" style="height: 20px" />
    <div class="row" style="height: 110px;margin: 0;">
      <!--如何装普通盒子 靠右侧-->
      <div style="padding: 0;position:relative;height: 90%">

        <div class="d-none d-lg-block" style="position:relative;float:left;height: 50%;width: 300px; border-left: solid 5px #1BA3E6;">
          <p style="left:5px;bottom:10px;color: whitesmoke;font-size: 20px;float: left">月度管理看板：</p>
          <el-date-picker v-model="queryParam.month" type="month" style="float: left;width: 120px;height: 20px" placeholder="选择月" @change="flush" />
        </div>
        <div class="d-none d-lg-block" style="position:relative;float:right;height: 50%;width: 200px;border-right: solid 5px #1BA3E6;">
          <p style="float:right;margin-right:10px;bottom:0px;color: whitesmoke;font-size: 20px;">智能制造系统看板</p>
        </div>
        <div class="comp_name" style="position:absolute;right:0;left:0;margin:0 auto;display: inline-block;height: 55%;width: 400px;border-bottom: solid 5px #1BA3E6">
          <!--<p style="position:absolute;right:0;margin:0 auto;bottom:10px;color: whitesmoke;font-size: 30px;">四川建安工业有限责任公司</p>-->
          <p style="position:absolute;top:0px;right:0;left:0;bottom:0px;text-align: center;color: whitesmoke;font-size: 30px;">四川建安工业有限责任公司</p>
        </div>
      </div>
    </div>
    <div class="row" style="height: 10px" />
    <el-row class="content">
      <el-row class="item">
        <el-col :span="8" class="item1"><v-chart :options="chart1" theme="dark_mxx" /></el-col>
        <el-col :span="8" class="item2"><v-chart :options="chart2" theme="dark_mxx" /></el-col>
        <el-col :span="8" class="item3"><v-chart :options="chart3" theme="dark_mxx" /></el-col>
      </el-row>
      <el-row class="item">
        <el-col :span="8" class="item4"><v-chart :options="chart4" theme="dark_mxx" /></el-col>
        <el-col :span="8" class="item5"><v-chart :options="chart5" theme="dark_mxx" /></el-col>
        <el-col :span="8" class="item6"><v-chart :options="chart6" theme="dark_mxx" /></el-col>
      </el-row>
      <el-row class="item">
        <el-col :span="8" class="item7"><v-chart :options="chart7" theme="dark_mxx" /></el-col>
        <el-col :span="8" class="item8"><v-chart :options="chart8" theme="dark_mxx" /></el-col>
        <el-col :span="8" class="item9"><v-chart :options="chart9" theme="dark_mxx" /></el-col>
      </el-row>
    </el-row>
  </div>
</template>
<style scoped>
  :root {
    --color_body: #152131;
    --color_blue: #1BA3E6;
    --color_boder: #769a9f;

  }
  body,html{
    margin: 0;
    padding: 0;
    height:100%;
    background-color:#152131 !important;
  }
  p,div,body,html canvas{
    margin: 0;
    padding: 0;
  }

  .container-fluid{
    background-color: #152131;
  }
  .container-fluid>.row{
    margin: 0 auto;
    padding: 0;
  }
  .container-fluid>.row>div{
    /*margin: 0 auto;*/
    padding: 0 2px;
    /*border: slid 10px;*/
  }
  .item1 ,.item2 ,.item4 ,.item5,.item7,.item8{
    border-right: dashed 1px #769a9f;
  }
  .item4 ,.item5,.item6{
    border-top: dashed 1px #769a9f;
    border-bottom: dashed 1px #769a9f;
  }
  /* < 768px 单行布局*/
  @media screen and (max-width: 767px){
    .content{
      margin: 0 auto;
      /*width: 400px;*/
    }
    .item{
      height: 220px;
    }
    .content>.item{
      border-bottom: dashed 1px var(--color_boder);
    }
    .content>.item:last-child{
      border-bottom: none;
    }
  }

  /* 手机 < 544px item宽度可伸缩，定高*/
  @media screen and (max-width: 543px){
    .content{
      margin: 0 auto;
      /*width: 400px;*/
    }
    .item{
      height: 220px;
    }
    .comp_name{
      width: 100% !important;
    }
    .comp_name > p{
      font-size: 20px !important;
    }
  }
  /* 更小屏幕（手机） 544px<= ~ <768px item设置宽度为544*/
  @media screen and (min-width: 544px) and (max-width:767px){
    .content{
      margin: 0 auto;
      width: 524px;
    }
    .item{
      height: 240px;
    }
  }
  /* 小屏幕（平板，768px<= ~ < 992px） 2行布局（平板竖着2行布局，横着不属于这个范围）*/
  @media screen and (min-width: 768px) and (max-width:991px){
    .content{
      width: 748px;
    }
    .item{
      height: 212px;
    }
    .content>.item{
      border-bottom: dashed 1px var(--color_boder);
    }
    .content>.item:nth-child(n+8){
      border-bottom: none;
    }
    .content>.item:nth-child(2n+1){
      border-right: dashed 1px var(--color_boder);
    }
    .content>.item:last-child{
      border-right: none;
    }
  }
  /* 中等屏幕（桌面显示器，>= 992px） 3行布局*/
  @media (min-width: 992px){
    .content{
      width: 972px;
    }
    .item{
      height: 200px;
      padding: 10px 10px;
    }
    .content>.item{
      border-right: dashed 1px var(--color_boder);
      border-bottom: dashed 1px var(--color_boder);
    }
    .content>.item:nth-child(3n){
      border-right: none;
    }
    .content>.item:nth-child(n+7){
      border-bottom: none;
    }
  }
  /* 大屏幕（大桌面显示器，>= 1200px） */
  @media screen and (min-width: 1200px){
    .content{
      margin: 0 159px;
      width: 1200px;
      height: 644px;
    }
    .item > div{
      height: 200px;
    }
    .echarts {
      width: 100%;
      height: 100%;
    }
    canvas{
      width: 100px;
      height: 100px;
    }
  }
  .content>.item{
    /*margin: 0 auto;*/
    /*padding: 100px 100px;*/
    /*border: dashed 1px var(--color_boder);*/
    /*border-image: linear-gradient(to right,rgba(0,0,0,.1), rgb(106,244,202), rgba(0,0,0,.4)) 30 30;*/
    /*border-image: rgb(1,2,3);*/
  }
</style>
<script>
import ECharts from 'vue-echarts/components/ECharts'
import 'echarts/lib/echarts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/line'
import '@/js/dark_mxx.js'
import { chart1 } from '@/api/report'
import { chart2 } from '@/api/report'
import { chart3 } from '@/api/report'
import { chart4 } from '@/api/report'
import { chart5 } from '@/api/report'
import { chart6 } from '@/api/report'
import { chart7 } from '@/api/report'
import { chart8 } from '@/api/report'
import { chart9 } from '@/api/report'

const titleFontSize = '10'
const legend_y = 10
const legendFontSize = '10'
const labelFontSize = '10'
const xFontSize = '10'
const yFontSize = '10'

export default {
  name: 'App',
  components: {
    'v-chart': ECharts
  },
  data() {
    return {
      finishNum: 300,
      unfinishNum: 300,
      chart2Result: null,
      queryParam: {
        month: new Date()
      },
      chart1: {
        title: {
          text: '月度产量计划达成率',
          textStyle: {
            fontSize: titleFontSize,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          textStyle: {
            fontSize: legendFontSize
          },
          orient: 'vertical',
          x: 'right',
          y: legend_y,
          data: ['月度产量达成', '月度未完成产量']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center',
                fontSize: labelFontSize
              },
              emphasis: {
                show: true,
                textStyle: {
                  // fontSize: '12',
                  // fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data:
               [
                 { value: 0, name: '月度产量达成' },
                 { value: 0, name: '月度未完成产量' }
               ]
          }
        ]
      },
      chart2: {
        title: {
          text: '月度产量环比',
          textStyle: {
            fontSize: titleFontSize,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          textStyle: {
            fontSize: legendFontSize,
            lineHeight: 59
          },
          data: ['月产值', '环比'],
          y: legend_y,
          bottom: '10%',
          top: '0'
        },
        grid: {
          left: '12%',
          top: '21%',
          bottom: '15%'
        },
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              fontSize: xFontSize
            },
            splitLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            // name: '水量',
            min: 0,
            max: 40000,
            interval: 3000,
            axisLabel: {
              fontSize: yFontSize
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            }
          },
          {
            type: 'value',
            // name: '温度',
            min: -30,
            max: 100,
            interval: 10,
            axisLabel: {
              formatter: '{value} %',
              fontSize: 10
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            }
          }
        ],
        series: [
          {
            name: '月产值',
            type: 'bar',
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          },
          {
            name: '环比',
            type: 'line',
            yAxisIndex: 1,
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            // smooth: false
          }
        ]
      },
      chart3: {
        title: {
          text: '月度客户值比',
          textStyle: {
            fontSize: titleFontSize,
            fontWeight: 'bold'
          }
        },
        legend: {
          textStyle: {
            fontSize: legendFontSize
          },
          top: '10%'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        grid: {
          top: '20%',
          bottom: '0%'
        },
        series: [
          {
            name: '客户值比',
            type: 'pie',
            radius: '55%',
            // center: ['50%', '50%'],
            label: {
              formatter: '{b}：{d}%',
              fontSize: labelFontSize
            },
            data: [
              { value: 65, name: '客户A' },
              { value: 20, name: '客户B' },
              { value: 10, name: '客户C' },
              { value: 5, name: '客户D' }
            ]
          }
        ]
      },
      chart4: {
        title: {
          text: '月度产品合格率（产出数/投入数）',
          textStyle: {
            fontSize: titleFontSize,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '12%',
          top: '20%',
          bottom: '10%'
        },
        legend: {
          textStyle: {
            fontSize: legendFontSize
          },
          data: ['质量合格率'],
          y: 20,
          top: '10%'
        },
        // grid: {
        //     left: '3%',
        //     right: '4%',
        //     bottom: '3%',
        //     containLabel: true
        // },
        xAxis: {
          type: 'category',
          // boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
          splitLine: {
            show: false
          },
          axisLabel: {
            fontSize: xFontSize
          }
        },
        yAxis: {
          type: 'value',
          min: 97,
          max: 100,
          interval: 1,
          axisLabel: {
            formatter: '{value} %',
            fontSize: yFontSize
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        series: [
          {
            name: '质量合格率',
            type: 'line',
            data: [98.2, 97.8, 98, 98.5, 98.4, 98.3, 97.7]
          }
        ]
      },
      chart5: {
        title: {
          text: '月度主要产品质量问题（发生数量）',
          textStyle: {
            fontSize: titleFontSize,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '12%',
          top: '20%',
          bottom: '15%'
        },
        xAxis: {
          type: 'category',
          data: ['表面硬度', '', '螺纹厚度', '', '节圈跳动', ''],
          axisTick: {
            alignWithLabel: true
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            fontSize: xFontSize
          }
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 30,
          interval: 5,
          axisLabel: {
            formatter: '{value} 次',
            fontSize: yFontSize
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        series: [
          {
            name: '发生数量',
            type: 'bar',
            data: [27, 23, 16, 12, 9, 4]
          }
        ]
      },
      chart6: {
        title: {
          text: '月度车间设备综合效率',
          textStyle: {
            fontSize: titleFontSize,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '12%',
          top: '20%',
          bottom: '10%'
        },
        legend: {
          textStyle: {
            fontSize: legendFontSize
          },
          data: ['设备效率'],
          y: 20,
          top: '10%'
        },
        xAxis: {
          type: 'category',
          // boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
          splitLine: {
            show: false
          },
          axisLabel: {
            fontSize: xFontSize
          }
        },
        yAxis: {
          type: 'value',
          min: 60,
          max: 100,
          interval: 10,
          axisLabel: {
            formatter: '{value} %',
            fontSize: yFontSize
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        series: [
          {
            name: '设备效率',
            type: 'line',
            data: [84, 83, 82.5, 84, 85, 83, 82]
          }
        ]
      },
      chart7: {
        title: {
          text: '月度制造成本环比',
          textStyle: {
            fontSize: titleFontSize,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          textStyle: {
            fontSize: legendFontSize
          },
          data: ['月度制造成本', '环比'],
          y: legend_y,
          top: '10%'
        },
        grid: {
          left: '12%',
          top: '20%',
          bottom: '10%'
        },
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              fontSize: xFontSize
            },
            splitLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            // name: '水量',
            min: 0,
            max: 40000,
            interval: 5000,
            axisLabel: {
              fontSize: yFontSize
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            }
          },
          {
            type: 'value',
            // name: '温度',
            min: -60,
            max: 60,
            interval: 20,
            axisLabel: {
              formatter: '{value} %',
              fontSize: 10
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            }
          }
        ],
        series: [
          {
            name: '月度制造成本',
            type: 'bar',
            data: [3500, 3700, 4100, 4400, 4700, 4800, 5000]
          },
          {
            name: '环比',
            type: 'line',
            yAxisIndex: 1,
            data: [3, 3, 4, 5, 3, 3, 4]
            // smooth: false
          }
        ]
      },
      chart8: {
        title: {
          text: '月度制造成本占比',
          textStyle: {
            fontSize: titleFontSize,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          textStyle: {
            fontSize: legendFontSize
          },
          top: '10%'
        },
        grid: {
          top: '20%',
          bottom: '0%'
        },
        series: [
          {
            name: '客户值比',
            type: 'pie',
            radius: '55%',
            label: {
              formatter: '{b}：{c}%',
              fontSize: labelFontSize
            },
            data: [
              { value: 40, name: '设备折旧' },
              { value: 25, name: '水电气费' },
              { value: 5, name: '辅消' },
              { value: 10, name: '车间管理费' },
              { value: 5, name: '其他' },
              { value: 15, name: '直接人工费' }
            ]
          }
        ]
      },
      chart9: {
        title: {
          text: '月度车间库存总额',
          textStyle: {
            fontSize: titleFontSize,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          textStyle: {
            fontSize: legendFontSize
          },
          data: ['库存总额', '环比'],
          y: legend_y,
          top: '20%',
          bottom: '-5%'
        },
        grid: {
          left: '12%',
          top: '20%',
          bottom: '10%'
        },
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              fontSize: xFontSize
            },
            splitLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            // name: '水量',
            min: 0,
            max: 40000,
            interval: 5000,
            axisLabel: {
              fontSize: yFontSize
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            }
          },
          {
            type: 'value',
            // name: '温度',
            min: -10,
            max: 10,
            interval: 2,
            axisLabel: {
              formatter: '{value} %',
              fontSize: 10
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            }
          }
        ],
        series: [
          {
            name: '库存总额',
            type: 'bar',
            data: [2300, 2400, 2500, 2600, 2700, 2800, 3000]
          },
          {
            name: '环比',
            type: 'line',
            yAxisIndex: 1,
            data: [3, 3, 4, 5, 3, 3, 4]
            // smooth: false
          }
        ]
      }
    }
  },
  created() {
    this.flush()
  },
  methods: {
    getChart1() {
      chart1(this.queryParam).then(response => {
        // this.finishNum = response.data.finishNum
        // this.unfinishNum = response.data.unfinishNum
        // this.chart1.series[0].data[0].value = response.data.finishNum
        // this.chart1.series[0].data[1].value = response.data.unfinishNum
        // 上面是原来的代码
        this.chart1.series[0].data = response.data
      })
    },
    getChart2() {
      chart2(this.queryParam).then(response => {
        // this.chart2Result = response.data
        // let monthArray = []
        // let outputValueArray = []
        // let ringRatioArray = []
        // for (let i = this.chart2Result.length - 1; i >= 0; i--) {
        //   monthArray.push(this.chart2Result[i].month + '月')
        //   outputValueArray.push(this.chart2Result[i].outputValue)
        //   ringRatioArray.push(this.chart2Result[i].ringRatio)
        // }
        // this.chart2.series[0].data = outputValueArray
        // this.chart2.series[1].data = ringRatioArray
        // this.chart2.xAxis[0].data = monthArray
        // 上面是原来的代码
        this.chart2.xAxis[0].data = response.data.name
        this.chart2.series[0].data = response.data.value
        this.chart2.series[1].data = response.data.chain_index
      })
    },
    getChart3() {
      chart3(this.queryParam).then(response => {
        this.chart3.series[0].data = response.data
      })
    },
    getChart4() {
      chart4(this.queryParam).then(response => {
        this.chart4.xAxis.data = response.data.name
        this.chart4.series.data = response.data.value
      })
    },
    getChart5() {
      chart5(this.queryParam).then(response => {
        this.chart5.xAxis.data = response.data.name
        this.chart5.series[0].data = response.data.value
      })
    },
    getChart6() {
      chart6(this.queryParam).then(response => {
        this.chart6.xAxis.data = response.data.name
        this.chart6.series[0].data = response.data.value
      })
    },
    getChart7() {
      chart7(this.queryParam).then(response => {
        this.chart7.xAxis[0].data = response.data.name
        this.chart7.series[0].data = response.data.value
        this.chart7.series[1].data = response.data.chain_index
      })
    },
    getChart8() {
      chart8(this.queryParam).then(response => {
        this.chart8.series[0].data = response.data
      })
    },
    getChart9() {
      chart9(this.queryParam).then(response => {
        this.chart9.xAxis[0].data = response.data.name
        this.chart9.series[0].data = response.data.value
        this.chart9.series[1].data = response.data.chain_index
      })
    },
    flush() {
      this.queryParam.month = this.queryParam.month.getFullYear() + '-' + Number(this.queryParam.month.getMonth() + 1)
      this.getChart1()
      this.getChart2()
      this.getChart3()
      this.getChart4()
      this.getChart5()
      this.getChart6()
      this.getChart7()
      this.getChart8()
      this.getChart9()
    }
  }
}
</script>
